<template>
	<view class="wrongTopic">
		<view class="wt-head">
			<view class="number" :class="{'not':my_score == ''}">{{ my_score == '' ? '正在批阅中，请等待' : my_score }}</view>
			<view class="text">分数</view>
			<view class="statistic">
				<view class="num">
					题目数量
					<text>{{ number }}题</text>
				</view>
				<view class="score">
					<view>
						总分数
						<text>{{ total_score }}</text>
					</view>
					<view class="see" @click="seeDetails()">查看答题情况 >></view>
				</view>
			</view>
		</view>
		<view class="stand"></view>
		<view class="su-main">
			<view class="scoreDetails">得分详情</view>
			<view class="item item-b" v-for="(item, index) in setUpList" :key="index" @click="onSetUp(item, index)">
				<view class="left">第{{ index + 1 }}题</view>
				<view class="right">
					<text>{{ item.score == '' ? '未批改' : item.score + '分' }}</text>
					<image src="/static/xs_icon/right3.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- <view class="pd-buttom"><view class="pdb-con" @click="onReturn()">退出登录</view></view> -->
	</view>
</template>

<script>
// import { mapState, mapMutations } from "vuex";
import { VERSION_CODE } from '@/common/config.js';
import successPop from '@/components/xs-components/success-pop/success-pop.vue';
export default {
	components: { successPop },
	data() {
		return {
			login: false,
			setUpList: [{ title: '1', id: '0', num: '10' }, { title: '2', id: '1', num: '6' }],
			showPopup: false, // 清除成功弹窗
			number: 0, // 题目总数量
			my_score: 0, // 得分
			total_score: 0, // 总分数
			exam_id: 0 // 考试ID
		};
	},
	onLoad(e) {
		this.exam_id = e.exam_id;
		this.into();
	},
	methods: {
		// ...mapMutations(['getAddress','auoutUS']),
		into() {
			this.postData();
		},
		// 获取数据
		postData() {
			this.$api
				.post(global.apiUrls.scoreDetails, {
					exam_id: this.exam_id
				})
				.then(res => {
					console.log(res.data);
					this.setUpList = res.data.data.list;
					this.number = res.data.data.question_num;
					this.my_score = res.data.data.my_score;
					this.total_score = res.data.data.total_score;
					// if (res.data.code == 1) {
					// 	this.setUpList = res.data.data;
					// 	// number
					// 	let number = 0;
					// 	for (let i in this.setUpList) {
					// 		number += this.setUpList[i].num;
					// 	}
					// 	this.number = number;
					// 	// this.getAddress(res.data.data);
					// }
				})
				.catch(err => {
					// this.$popup.showToast('保存失败')
				});
		},
		// 列表点击事件
		onSetUp(item, index) {
			console.log(item, index);
			uni.navigateTo({
				url: './mockTest?course_id=' + this.exam_id + '&index=' + index
			});
		},
		// 查看详情
		seeDetails() {
			uni.navigateTo({
				url: './mockTest?course_id=' + this.exam_id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f2f3f4;
}
.wrongTopic {
	border-top: 1px solid #eee;
	background-color: #fff;
	min-height: 100vh;
	.wt-head {
		// height: 280upx;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 32upx;
		.number {
			font-size: 88upx;
			font-weight: 800;
			color: #267dff;
		}
		.not{
			font-size: 60upx;
		}
		.text {
			// padding-top: 10upx;
			font-size: 28upx;
			color: #333333;
		}
		.statistic {
			width: 100%;
			color: #999;
			font-size: 28upx;
			padding-top: 67upx;
			.num {
				text {
					margin-left: 56upx;
				}
			}
			.score {
				padding-top: 32upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text {
					margin-left: 84upx;
					color: #ff4040;
				}
			}
			.see {
				color: #267dff;
			}
		}
	}
	.stand {
		height: 16upx;
		background: #f5f6f7;
	}
	.su-main {
		padding: 32upx;
		// .item-b:nth-last-child(1){
		//   // border-bottom: 1px solid #fff;
		// }
		.scoreDetails {
			font-size: 32upx;
			font-weight: bold;
			color: #333333;
		}
		.item {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32upx 0;
			font-size: 28upx;
			border-bottom: 1px solid #eeeeee;
			.left {
				color: #333333;
			}
			.right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333333;
				text {
					display: inline-block;
					vertical-align: middle;
					color: #ff4040;
					padding-right: 20upx;
				}
				image {
					display: inline-block;
					vertical-align: middle;
					width: 12upx;
					// height: 24upx;
					margin-left: 10upx;
				}
				.ir-qr {
					width: 32upx;
					height: 32upx;
				}
			}
			.pmi-img {
				display: flex;
				align-items: center;
				image {
					width: 118upx;
					height: 118upx;
					border-radius: 5px;
				}
				.pml-r {
					margin-left: 10upx;
					width: 24upx;
					height: 24upx;
				}
			}
		}
	}
	.su-cont {
		background-color: #f2f2f2;
		height: 20upx;
	}
	.pd-buttom {
		position: fixed;
		bottom: 91upx;
		left: 0;
		right: 0;
		text-align: center;
		padding: 0 32upx;
		.pdb-con {
			background-color: #1a2747;
			opacity: 0.5;
			color: #fff;
			padding: 22upx 0;
			border-radius: 50px;
			font-size: 32upx;
		}
	}
}
</style>
